<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>student</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
    <!--添加按钮-->
    <button type="button" class="layui-btn" id="add">添加学生</button>
    <!-- 添加表单 -->
    <form class="layui-form" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 20px 20px 10px 10px">
        <div class="layui-form-item">
            <label class="layui-form-label">学生姓名</label>
            <div class="layui-input-block">
                <input type="hidden" name="pic">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生生日</label>
            <div class="layui-input-block">
                <input type="text" name="birth" id="birth1" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生头像</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="pic1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addFilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!-- 展示表格 -->
    <table id="myTable" lay-filter="tableFilter"></table>
    <!--表格显示图片-->
    <script type="text/html" id="img">
        <img src="{{d.pic}}" height="20" width="30"/>
    </script>
    <!-- toolbar组件 -->
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs" lay-event="upd">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
    <!-- 修改表单 -->
    <form class="layui-form" id="updateForm" lay-filter="updateFormFilter"style="display: none;padding: 20px 20px 10px 10px">
        <div class="layui-form-item">
            <label class="layui-form-label">学生姓名</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="hidden" name="pic">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生生日</label>
            <div class="layui-input-block">
                <input type="text" name="birth" id="birth2" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生头像</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="pic2">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateFilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <!--layui-->
    <script>
        layui.use(['table','form','laydate','layer','upload'],function () {
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var upload = layui.upload;
            var $ = layui.$;
            //渲染展示表格
            table.render({
                elem:'#myTable',
                url:'student/select',
                height:'500px',
                page:true,
                limit:4,
                limits:[4,5,6],
                cols:[[
                    {field:'id',title:'学生编号',width:180,sort:true},
                    {field:'name',title:'学生姓名',width:180,sort:true},
                    {field:'age',title:'学生年龄',width:180,sort:true},
                    {field:'birth',title:'学生生日',width:180,sort:true},
                    {field:'pic',title:'学生头像',templet:'#img'},
                    {title:'操作',toolbar:'#bar'}
                ]]
            })
            //添加操作
            $('#add').click(function () {
                //1、点击添加按钮  弹出添加页面
                layer.open({
                    type:1,
                    title:'添加页面',
                    area:'500px',
                    content:$('#addForm')
                })
                //2、文件上传组件upload
                upload.render({
                    elem:'#pic1',       //指明上传文件的按钮
                    url:'student/upload',   //后台处理文件上传的方法
                    done:function (result) {
                        //result 就是文件上传方法的返回值 这里就是指图片上传到虚拟目录的名字
                        form.val('addFormFilter',{
                            //用from表单的val方法给其内的输入框赋值
                            //val的第一个参数是该form表单的lay-filter属性值
                            // 第二个参数是个{ key:value }  key是输入框的name属性值
                            pic:result.flag
                        })
                    }
                })
                //3、日期组件
                laydate.render({
                    elem:'#birth1'
                })
                //4、添加form表单的提交
                form.on('submit(addFilter)',function () {
                    $.ajax({
                        url:'student/add',
                        data:$('#addForm').serialize(),
                        success:function (result) {
                            if(result.flag){
                                layer.msg('添加成功');
                                layer.closeAll();
                                $('#addForm')[0].reset();//清空表单数据
                                table.reload('myTable');
                            }
                        }
                    })
                    //阻止表单提交
                    return false;
                })
                //table表格的on方法  tool组件给修改和删除绑定点击事件
                //其中tableFilter指的是当前表格的lay-filter属性值
                table.on('tool(tableFilter)',function (obj) {
                    if(obj.event=='upd'){   //修改操作
                        //1、弹出修改页面层
                        layer.open({
                            type:1,
                            title:'修改页面',
                            area:'500px',
                            content:$('#updateForm')
                        })
                        //2、日期组件
                        laydate.render({
                            elem:'#birth2'
                        })
                        //3、文件上传组件
                        upload.render({
                            elem:'#pic2',
                            url:'student/upload',
                            done:function (res) {
                                form.val('updateFormFilter',{
                                    pic:res.flag
                                })
                            }
                        })
                        //4、回显修改页面数据
                        $.ajax({
                            url:'student/getOne',
                            data:'id='+obj.data.id,
                            success:function (result) {
                                form.val('updateFormFilter',{
                                    id: result.id,
                                    name:result.name,
                                    age:result.age,
                                    birth:result.birth,
                                    pic:result.pic
                                })
                            }
                        })
                        //5、修改页面的提交事件
                        form.on('submit(updateFilter)',function () {
                            $.ajax({
                                url:'student/update',
                                data:$('#updateForm').serialize(),
                                success:function (result) {
                                    if(result.flag){
                                        layer.msg('修改成功');
                                        layer.closeAll();
                                        table.reload('myTable');
                                    }
                                }
                            })
                            return false;
                        })

                    }else if(obj.event=='del'){ //删除操作
                        layer.confirm('确定删除吗？',function (index) {
                            $.ajax({
                                url:'student/delete',
                                data:'id='+obj.data.id,
                                success:function (result) {
                                    layer.msg('删除成功');
                                    table.reload('myTable');
                                }
                            })
                            layer.close(index);
                        })
                    }
                })
            })
        })
    </script>
</body>
</html>